<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <script src="/command/jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/command/bootstrap-4.4.1-dist/css/bootstrap.css">
    <script type="text/javascript" src="/command/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>

<body>
<div align="center">
    <table class="table" style="width: 500px">
        <tr>
            <td>头像：</td>
            <td>
                <a onclick="fileBtn()">
                    <div id="insertImages">
                    </div>
                </a>
            </td>
        </tr>
        <tr>
            <td>id:</td>
            <td th:text="${userinfo.id}"></td>
        </tr>
        <tr>
            <td>用户名:</td>
            <td th:text="${userinfo.username}"></td>
        </tr>
        <tr>
            <td>电话号码:</td>
            <td th:text="${userinfo.phone}"></td>
        </tr>
        <tr>
            <td>邮箱:</td>
            <td th:text="${userinfo.email}"></td>
        </tr>
    </table>
    <a href="javascript:;" onclick="updateinfo()" class="btn btn-success">修改资料</a>
<!--    <a href="javascript:;" onclick="back()" class="btn btn-danger">返回主页</a>-->
    <input type="file" id="file" onchange="upload(this)" style="display: none">
</div>


<script>
    function updateinfo() {
        window.location.href = "/modifyUser/" + sessionStorage.getItem("uid");
    }

    function back() {
        window.location.href = "/index";
    }

    function fileBtn() {
        document.getElementById('file').click()
    }

    function upload(file) {
        let img = document.getElementById('insertImages');
        let formData = new FormData();
        let temp = file.files[0];
        if (temp) {
            formData.append('file', temp);
            formData.append('uid', sessionStorage.getItem("uid"));
            img.src = window.URL.createObjectURL(temp);
            $.ajax({
                url: "/file2",
                type: "POST",
                data: formData,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function (result) {
                    alert(result);
                    window.location.reload();
                }
            })
        }
    }
</script>
<script th:inline="javascript">
    let user = [[${userinfo}]];
    let pic = user.pic;
    sessionStorage.setItem("username",user.username);
    let img = document.createElement("img");
    img.src = "data:image/jpeg;base64," + pic;
    img.width = 100;
    img.height = 100;
    $("#insertImages").html(img);
</script>

</body>
</html>